<template>
  <div class="container">
    <!-- 加载状态 -->
    <div v-if="isLoading" class="loading-container">
      <div class="loading-spinner"></div>
      <div class="loading-text">加载中...</div>
    </div>
    
    <!-- 游戏详情内容 -->
    <div v-else>
      <!-- 游戏图标、名字和类型 -->
      <div class="game-header">
        <img :src="game.icon" alt="游戏图标">
        <div class="game-info">
          <h1>
            {{game.name}}
            <span v-if="game.cate == 20" class="unified-rare-tag">稀有</span>
            <span v-if="game.cate == 90" class="unified-buyout-tag">买断</span>
          </h1>
          <div class="game-type">{{game.intro}}</div>

          <!-- 游戏特色标签 -->
          <div class="game-feature">
            <span class="feature-tag" v-for="(tag, index) in tagsArray" :key="index">{{ tag }}</span>
          </div>
        </div>
      </div>

      <!-- 游戏详情内容 -->
      <div class="content">
        <div class="game-description">
          <p v-if="game.links && game.links.length > 0">
            <a class="link-url" v-for="link in game.links" :key="link.id" @click.prevent="handleLinkClick(link.url)">{{link.intro}}</a>
          </p>
          <p v-if="game.detailTips">
            <strong>注意事项：</strong><br/>
            <span v-html="game.detailTips"></span>
          </p>

          <template v-if="game.contacts && game.contacts.length > 0">
            <p v-for="(item,index) in game.contacts" :key="index">
              <span>{{item.intro}}:</span>
              <span>{{item.info}}</span>
              <button @click="copyContact(item.info)">复制</button>
            </p>
          </template>
        </div>

        <!-- 游戏截图 -->
        <div class="screenshots">
          <img v-for="(pic, index) in game.pics" :key="index" :src="pic" :alt="'游戏截图' + (index + 1)">
        </div>
      </div>

      <!-- 底部固定按钮 -->
      <div class="footer-buttons">
        <router-link :to="'/download?gameId=' + gameId">下载游戏</router-link>
        <router-link v-if="game.cate != 90 && game.cate != 5" :to="'/backend?gameId=' + gameId">进入后台</router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailPage'
}
</script>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const gameId = ref(route.query.gameId)
const game = ref({
  cate: 10  // 设置默认值为 true，这样标签默认不显示
})
const tagsArray = ref([])
const isLoading = ref(false)

// 处理链接跳转
const handleLinkClick = (url) => {
  if (url.startsWith('http://') || url.startsWith('https://')) {
    // 外部链接,直接跳转
    window.open(url, '_blank')
  } else {
    // 内部路由,使用router-link
    router.push(url)
  }
}

const copyContact = (text) => {
  // 检查是否支持navigator.clipboard（需要HTTPS）
  if (navigator.clipboard && window.isSecureContext) {
    navigator.clipboard.writeText(text).then(() => {
      alert('复制成功')
    }).catch(() => {
      alert('复制失败')
    })
  } else {
    // fallback方案：使用document.execCommand
    try {
      const textarea = document.createElement('textarea')
      textarea.value = text
      document.body.appendChild(textarea)
      textarea.select()
      const successful = document.execCommand('copy')
      document.body.removeChild(textarea)
      
      if (successful) {
        alert('复制成功')
      } else {
        alert('复制失败')
      }
    } catch (err) {
      alert('复制失败')
    }
  }
}

const loadGameDetail = async (id) => {
  if (!id) return
  
  // 清空旧数据并显示加载状态
  game.value = { cate: 10 }
  tagsArray.value = []
  isLoading.value = true
  
  try {
    const response = await fetch("/api/game/detail", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "accept": "application/json, text/plain, */*",
        "accept-language": "zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6"
      },
      body: JSON.stringify({ gameId: id })
    });
    const data = await response.json();
    game.value = data;
    tagsArray.value = data.tags.split(',').slice(0, 3);
  } catch (error) {
    console.error('Error fetching game detail:', error);
  } finally {
    isLoading.value = false
  }
}

// 监听路由参数变化
watch(() => route.query.gameId, (newGameId) => {
  if (newGameId && newGameId !== gameId.value) {
    gameId.value = newGameId
    loadGameDetail(newGameId)
  }
}, { immediate: true })

onMounted(() => {
  loadGameDetail(gameId.value)
})
</script>

<style scoped>
/* 基本样式 */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f7f7f7;
}

/* 设置最大宽度并使页面内容居中 */
.container {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 80px;
}

/* 游戏图标 + 名字 + 类型 + 特色标签 */
.game-header {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 600px;
  z-index: 9999;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  margin: 0 auto;
}

.game-header img {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  margin-right: 15px;
  object-fit: cover;
  aspect-ratio: 1;
}

.game-header .game-info {
  display: flex;
  width: 345px;
  flex-direction: column;
  justify-content: flex-start;
}

.game-header .game-info h1 {
  margin: 0;
  font-size: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.unified-rare-tag {
  background-color: #B8860B;
  color: #FFF8DC;
  font-weight: bold;
  font-size: 12px;
  padding: 1px 4px;
  border-radius: 4px;
}

.unified-buyout-tag {
  background-color: #1976D2;
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  padding: 1px 4px;
  border-radius: 4px;
}

.game-header .game-info .game-type {
  font-size: 14px;
  color: #777;
  margin-top: 5px;
}

/* 游戏特色标签 */
.game-feature {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.game-feature .feature-tag {
  display: inline-block;
  padding: 2px 4px;
  margin-bottom: 8px;
  background: #f0f0f0;
  border-radius: 4px;
  font-size: 12px;
  color: #666;
  line-height: 1.5;
}

/* 内容部分 */
.content {
  padding: 15px;
  margin-top: 120px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.link-url {
  display: block;
  margin-bottom: 10px;
}

.game-description {
  font-size: 18px;
  line-height: 1.8;
  color: #333;
  font-weight: 500;
  margin-bottom: 20px;
  padding-top: 20px;
}

.game-description a {
  color: #007bff;
  text-decoration: none;
}

.game-description a:hover {
  text-decoration: underline;
}

/* 复制按钮样式 */
.game-description button {
  padding: 2px 8px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  margin-left: 8px;
  transition: background-color 0.3s;
  line-height: 1.2;
}

.game-description button:hover {
  background-color: #45a049;
}

/* 游戏截图样式 */
.screenshots {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.screenshots img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* 底部按钮 */
.footer-buttons {
  display: flex;
  justify-content: space-around;
  padding: 15px;
  background-color: #333;
  gap: 10px;
  width: 100%;
  margin: 0 auto;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 1000;
}

.footer-buttons a {
  text-decoration: none;
  padding: 10px 20px;
  background-color: #ff9900;
  color: white;
  border-radius: 5px;
  font-size: 16px;
  text-align: center;
  width: 48%;
}

.footer-buttons a:hover {
  background-color: #ff7f00;
}

/* 加载状态样式 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f7f7f7;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #1976D2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

.loading-text {
  color: #666;
  font-size: 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style> 